<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head> 
	<meta name="decorator" content="exampleIndex"/> 
	<link href="${staticPath}/lib/datetimepicker/0.0.11/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="panel panel-default">
	  <div class="panel-heading">
	    <h3 class="panel-title">表单元素
	    <a class="btn btn-default btn-sm pull-right o-a-button" role="button" href="javascript:void(0)" onclick="history.go(-1)">返回</a>
	    </h3>
	  </div>
	  <div class="panel-body">
	  	<form role="form" class="form-horizontal">
	  		<div class="form-group">
				<label for="name" class="col-sm-2 control-label">单行文本:</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="name" placeholder="输入字段">
				</div>
			</div>
	  		<div class="form-group">
				<label for="element2" class="col-sm-2 control-label">多行文本:</label>
				<div class="col-sm-10">
					<textarea class="form-control" rows="3" id="element2"></textarea>
				</div>
			</div>
	  		<div class="form-group">
				<label for="element3" class="col-sm-2 control-label">下拉框:</label>
				<div class="col-sm-10">
					<ossp:select dictType="city" id="element3" class_="form-control"></ossp:select>
				</div>
			</div>
	  		<div class="form-group">
				<label for="element4" class="col-sm-2 control-label">复选框:</label>
				<div class="col-sm-10">
					<ossp:checkbox dictType="city" id="element4"></ossp:checkbox>
				</div>
			</div>
	  		<div class="form-group">
				<label for="element5" class="col-sm-2 control-label">单选框:</label>
				<div class="col-sm-10">
					<ossp:radio dictType="city" id="element5" name="element5"></ossp:radio>
				</div>
			</div>
	  		<div class="form-group">
				<label for="element5" class="col-sm-2 control-label">时间选择:</label>
				<div class="col-sm-4">
					<div class="input-group date o-a-form-datetime" data-date="" data-date-format="yyyy-mm-dd hh:ii">
						<input class="form-control" type="text" readonly/>
						<span class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
 								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="input-group date o-a-form-date" data-date="2012-06-15" data-date-format="yyyy-mm-dd">
						<input class="form-control" type="text" readonly/>
 								<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="input-group date o-a-form-time" data-date="" data-date-format="hh:ii" data-date-minView="0">
						<input class="form-control" type="text" readonly/>
 								<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
					</div>
				</div>
			</div>
	  	</form>
	  </div>
	</div>	
	<script src="${staticPath}/lib/datetimepicker/0.0.11/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
	<script src="${staticPath}/lib/datetimepicker/0.0.11/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(".o-a-form-date").datetimepicker({
	        language:  'zh-CN',
	        autoclose: true,
	        minView: 2,
	        todayBtn:  1,
	        pickerPosition: "bottom-left"
	    });
		$(".o-a-form-datetime").datetimepicker({
	        language:  'zh-CN',
	        autoclose: true,
	        pickerPosition: "bottom-left"
	    });
		$(".o-a-form-time").datetimepicker({
	        language:  'zh-CN',
			autoclose: 1,
			startView: 1,
			maxView: 1,
	        pickerPosition: "bottom-left"
	    });
		$(document).ready(function() {
			$("#inputForm").validate({
				submitHandler: function(form){
					if ($("#categoryId").val()==""){
						$("#categoryName").focus();
						top.$.jBox.tip('请选择归属栏目','warning');
					}else if (CKEDITOR.instances.content.getData()==""){
						top.$.jBox.tip('请填写正文','warning');
					}else{
						loading('正在提交，请稍等...');
						form.submit();
					}
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
	</script>
</body>
</html>